<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Graph Editor</title>
	<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
	<script type="text/javascript" src="js/asciisvgdlg.js"></script>
	<script type="text/javascript" src="js/ASCIIsvgPI.js"></script>
</head>
<body>

<form onsubmit="AsciisvgDialog.insert();return false;" action="#">
	<div id="options">Equation type: <select id="eqntype" onchange="AsciisvgDialog.changetype()">
<option value="func">y=f(x)</option>
<option value="polar">r=f(t)</option>
<option value="param">x=f(t),y=g(t)</option>
<option value="slope">dy/dx = f(x,y)</option>
</select>
&nbsp;&nbsp;&nbsp;
<span id="eq1lbl">f(x)=</span> <input type="text" id="equation" size="15" value="sin(x)"/> <span id="eq2lbl"><i></i></span><span id="eq2"><i></i></span>
&nbsp;from <input type="text" id="xstart" size="4" value=""/> to <input type="text" id="xend" size="4" value=""/>
<HR>

Color: <Select id="gcolor">
	<option value="black">Black</option>
	<option value="red">Red</option>
	<option value="orange">Orange</option>
	<option value="yellow">Yellow</option>
	<option value="green">Green</option>
	<option value="blue">Blue</option>
	<option value="purple">Purple</option>
</select> 
Width: <Select id="strokewidth">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
</select> 
Line: <Select id="strokedash">
	<option value="none">Solid</option>
	<option value="2">Dotted</option>
	<option value="5">Dashed</option>
	<option value="5 2">Tight Dash</option>
	<option value="7 3 2 3">Dash-Dot</option>
</select> 

Start with: <Select id="gstart">
	<option value="none">Nothing</option>
	<option value="arrow">Arrow</option>
	<option value="opendot">Open Dot</option>
	<option value="dot">Dot</option>
</select>
End with: <Select id="gend">
	<option value="none">Nothing</option>
	<option value="arrow">Arrow</option>
	<option value="opendot">Open Dot</option>
	<option value="dot">Dot</option>
</select> 
</div>
<HR>

xmin: <input type="text" id="xmin" size="4" value="-7.5" onChange='AsciisvgDialog.graphit()'/>
xmax: <input type="text" id="xmax" size="4" value="7.5" onChange='AsciisvgDialog.graphit()'/>
xscl: <input type="text" id="xscl" size="3" value="1" onChange='AsciisvgDialog.graphit()'/>
&nbsp;&nbsp;
ymin: <input type="text" id="ymin" size="4" value="-5" onChange='AsciisvgDialog.graphit()'/>
ymax: <input type="text" id="ymax" size="4" value="5" onChange='AsciisvgDialog.graphit()'/>
yscl: <input type="text" id="yscl" size="3" value="1" onChange='AsciisvgDialog.graphit()'/>
<HR>

Show axis labels: <input type="checkbox" id="labels" value="Show Labels" onClick='AsciisvgDialog.graphit()' CHECKED/>
Show XY grid: <input type="checkbox" id="grid" value="Show Grid" onClick='AsciisvgDialog.graphit()' CHECKED/>
&nbsp;&nbsp;
Resize to: <input type="text" id="gwidth" size="5" value="300"/> by <input type="text" id="gheight" size="5" value="200"/>
<input type="button" value="Update" onclick="AsciisvgDialog.graphit()"/>
<HR>

<input type="button" value="Add Graph" onclick="AsciisvgDialog.addgraph()"/>
Graphs: <select id="graphs" onchange="AsciisvgDialog.loadeqn()"></select>
<input type="button" value="Replace Selected Graph" onclick="AsciisvgDialog.replacegraph()"/>
<input type="button" value="Remove" onclick="AsciisvgDialog.removegraph()"/>
<select id="alignment" onchange="AsciisvgDialog.graphit()">
<option value="text-top">Top</option>
<option value="middle">Middle</option>
<option value="text-bottom">Bottom</option>
<option value="left">Float left</option>
<option value="right">Float right</option>
</select>

<hr/>
<div id="preview"><embed id="previewsvg" type="image/svg+xml" src="js/d.svg" style="width: 300px; height: 200px; vertical-align: middle; float: none;" sscr="-7.5,7.5,-5,5,1,1,1,1,1,300,200" /></div>

	
	<div class="mceActionPanel">
		<div style="float: left">
			<input type="button" id="insert" name="insert" value="{#insert}" onclick="AsciisvgDialog.insert();" />
		</div>

		<div style="float: right">
			<input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
		</div>
	</div>
</form>

</body>
</html>
